<template>
  <div id="a">
    <Header :activeIndex2="act"></Header>
    <template>
      <el-carousel indicator-position="outside">
        <el-carousel-item v-for="(list,i) in list" :key="'a'+i" v-if="list.sellingPrice == '12'">
          <div class="tupian">
            <img :src="list.src" alt="" @click="xq(list)">
          </div>
          <div class="shuju">
            <div>
              <span>书名 : {{ list.title }}</span>
            </div>
            <div>
              <span>作者 : {{ list.author }}</span>
            </div>
            <div>
              <span>出版社 : {{ list.AuthorPress }}</span>
            </div>
            <div>
              <span>价格 : {{ list.sellingPrice }}</span>
            </div>
            <div>
              <span>简介 : {{ list.desc }}</span>
            </div>
          </div>

        </el-carousel-item>
      </el-carousel>
    </template>
    <div class="content">
      <el-row :gutter="20">

        <el-col :span="6" v-for="(list,i) in list" :key="i">
          <div class="grid-content bg-purple">
            <div class="img">
              <img :src="list.src" alt="" @click="detail(list)">
            </div>
            <div class="introduct">
              <span>书名 : {{ list.title }}</span>
            </div>
            <div class="introduct">
              <span>作者 : {{ list.author }}</span>
            </div>
            <div class="introduct">
              <span>出版社 : {{ list.AuthorPress }}</span>
            </div>
            <div class="introduct">
              <span>价格 : {{ list.sellingPrice }}</span>
            </div>
            <div class="jiaru">
              <el-row>
                <el-button type="primary" plain @click="add(list)">加入购物车</el-button>
              </el-row>
            </div>
          </div>

        </el-col>

      </el-row>
    </div>
    <Footer></Footer>

  </div>
</template>
<script>
import Header from "@/components/Header";
import Footer from "@/components/Footer";
export default {
  props: {},
  components: {
    Header,
    Footer
  },
  data: function() {
    return {
      act: "1",
      list: {
        title: "",
        author: "",
        AuthorPress: "",
        sellingPrice: "",
        desc: "",
        src: ""
      }
    };
  },
  methods: {
    getdata() {
      axios.get("/getdata").then(res => {
        console.log(res);
        console.log(res.data.data);

        this.list = res.data.data;
      });
    },
    add(x) {
      console.log(x);
      axios
        .post("/add", {
          data: x
        })
        .then(res => {
          console.log(res);
          this.$message({
            message: "加入购物车成功",
            type: "success"
          });
          setTimeout(function() {
            location.href = "case.html";
          }, 1500);
        });
    },
    detail(x) {
      location.href = "company.html?" + x.serial;
    },
    xq(x) {
      location.href = "company.html?" + x.serial;
    }
  },
  created() {
    this.getdata();
  },
  beforeMount() {
    if (!sessionStorage.username) {
      location.href = "login.html";
    }
  }
};
</script>
<style scoped>
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.el-carousel {
  margin: 0 auto;
  max-width: 1000px;
  margin-top: 20px;
}

.el-carousel__item {
  background-image: url("/static/images/bg4.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.el-carousel__container {
  height: 370px;
  overflow: hidden;
}
.chuan {
  width: 100%;
  height: 100%;
}

.tupian {
  float: left;
  width: 40%;
  text-align: right;
  height: 180px;
  padding-top: 50px;
}

.tupian img {
  width: 160px;
  height: 175px;
}
.tupian img:hover {
  animation: memoir 3s linear infinite;
}
@keyframes memoir {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
}
.shuju {
  float: left;
  width: 25%;
  padding-top: 80px;
  text-align: left;
  padding-left: 20%;
}
.content {
  margin: 0 auto;
  max-width: 1000px;
  margin-top: 20px;
}

.el-row {
  margin-bottom: 20px;
}

.el-col {
  border-radius: 4px;
  margin-bottom: 20px;
}

.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
  height: 300px;
  box-shadow: 5px 5px 5px #475669;
  padding-bottom: 10px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

.img {
  height: 170px;
  text-align: center;
  padding-top: 10px;
}

.img img {
  width: 160px;
  height: 165px;
}
.img img:hover {
  animation: memoir 3s linear infinite;
}
.introduct {
  padding-left: 30px;
  font-size: 15px;
}
.jiaru {
  text-align: right;
  padding-right: 10px;
}
</style>